<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <style>
     
        #tinymce-app{display:none;}
        #tinymce-app .toolbar {padding-bottom:10px;}
        #tinymce-app .tox .tox-toolbar{background:none;}
        #tinymce-app .tox-tinymce-inline .tox-editor-header{border:none;}
        #tinymce-app .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){border:none;}
        #tinymce-app .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type):after{border:none;}
        #tinymce-app .box {padding:10px;border:1px solid #ddd;}
        #tinymce-app .tit{padding-bottom:10px;}
        #tinymce-app .tit input{font-size:24px;padding:8px 8px;width:100%;box-sizing:border-box;border:none;box-shadow:none;background-color:#fefefe;color:#777;border-bottom:1px dotted #ccc;}
         #tinymce-app .tit input:focus{outline:0;}
        #tinymce-app .tinymce-cnt{min-height:300px;max-height:500px;overflow:auto;font-size:16px;padding:0.5em;}
        #tinymce-app .tinymce-cnt:focus{outline:0;}
        #tinymce-app .tinymce-cnt p{text-indent:0; margin:0;padding: 0; margin-bottom: 0.5em;}
    </style>
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
  <!-- <script src='./api/api.js'></script> -->
  
  <script src='/tinymce/tinymce.js'></script><!-- 必要 -->
  <script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->

</head>
<body tp-page-height="90">
      <div class="demo">
        <div id="tinymce-app">
            <div class="toolbar"></div>
            <div class="tit"><input type="text" placeholder="请输入标题……"></div>
            <div class="tinymce-demo" style="color: #000;">
                <div class="tinymce-cnt" id="tinymce-doc">
                </div>
            </div>
        </div>
      </div>
  <script>
    
    tinymce.init({
        selector: '#tinymce-doc',
        language:'zh_CN',
        menubar:false,
        inline: true,
        plugins: 'print preview searchreplace autolink fullscreen image link media code codesample table charmap hr pagebreak nonbreaking anchor advlist lists textpattern help emoticons autosave bdmap tpIndent2em axupimgs',
        toolbar: 'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link | alignleft aligncenter alignright alignjustify | bullist numlist blockquote subscript superscript removeformat | \
            formatselect fontselect fontsizeselect | \
            table image media charmap emoticons hr pagebreak print preview | fullscreen | bdmap tpIndent2em axupimgs',
        fixed_toolbar_container:'#tinymce-app .toolbar',
        custom_ui_selector: 'body',
        placeholder:'placeholder占位文字',
        //auto_focus: true,
        toolbar_mode : 'wrap',
        toolbar_sticky: true,
        autosave_ask_before_unload: false,
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
        images_upload_base_path: '',
        images_upload_handler: function (blobInfo, succFun, failFun) {
        var file = blobInfo.blob();
        var reader = new FileReader();
        reader.onload = function(e){
            succFun(e.target.result)
        }
        reader.readAsDataURL(file)
        },
        init_instance_callback: function(editor){
            $('#tinymce-app').fadeIn(1500);
            editor.execCommand('selectAll');
            editor.selection.getRng().collapse(false);
            editor.focus();
        }
    });
            
  </script>
</body>
</html>

